<template>
  <div class="app-container">
    <!-- 按钮 开始-->
    <el-card class="box-card">
      <div style="text-align:right;">
        <el-button type="primary" icon="el-icon-plus" :disabled="isSubmit" size="small" @click="handleAddMedicines">添加药品</el-button>
        <el-button type="warning" icon="el-icon-check" :disabled="isSubmit" size="small" @click="handleSubmit">暂存</el-button>
        <el-button type="danger" icon="el-icon-finished" :disabled="isSubmit" size="small" @click="handleSubmitAndAudit">提交审核</el-button>
      </div>
    </el-card>
    <!-- 按钮 结束-->

    <!-- 主表单开始 -->
    <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="68px">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-form-item label="单据号" prop="purchaseId">
              <el-input
                      v-model="form.purchaseId"
                      placeholder="请输入单据号"
                      :disabled="true"
                      size="small"
                      style="width:220px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="供应商" prop="providerId">
              <el-select
                      v-model="form.providerId"
                      placeholder="请选择供应商"
                      size="small"
                      style="width:220px"
              >
                <el-option
                        v-for="d in providerOptions"
                        :key="d.providerId"
                        :label="d.providerName"
                        :value="d.providerId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item label="总批发额" prop="purchaseTradeTotalAmount">
              <el-input
                      v-model="form.purchaseTradeTotalAmount"
                      placeholder="请输入总批发额"
                      :disabled="true"
                      size="small"
                      style="width:220px"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 主表单结束 -->

    <!-- 选择中的详情数据表格开始 -->
    <el-card class="box-card">
      <el-table
              :data="purchaseItemList"
              class="tb-edit"
              style="width:100%"
              border
              highlight-current-row
      >
        <el-table-column label="药品ID" align="center" width="80" prop="medicinesId" />
        <el-table-column label="药品名称" align="center" width="150" prop="medicinesName" />
        <el-table-column label="规则" align="center" width="80" prop="conversion">
          <template slot-scope="scope">
            <span> {{ scope.row.conversion }}{{ scope.row.unit }}</span>
          </template>
        </el-table-column>
        <el-table-column label="生产厂家" align="center" width="220" prop="producterId" :formatter="producterFormatter" />
        <el-table-column label="数量" align="center" width="160" prop="purchaseNumber">
          <template slot-scope="scope">
            <el-input-number
                    v-model="scope.row.purchaseNumber"
                    :step="1"
                    size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="单位" align="center" width="80" prop="unit" />
        <el-table-column label="批发价" align="center" width="160" prop="tradePrice">
          <template slot-scope="scope">
            <el-input-number
                    v-model="scope.row.tradePrice"
                    :step="0.1"
                    :precision="2"
                    size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="批发额" align="center" width="80" prop="tradeTotalAmount">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeTotalAmount|rounding }}</span>
          </template>
        </el-table-column>
        <el-table-column label="批次号" align="center" width="180" prop="batchNumber">
          <template slot-scope="scope">
            <el-input
                    v-model="scope.row.batchNumber"
                    size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" width="180" prop="remark">
          <template slot-scope="scope">
            <el-input
                    v-model="scope.row.remark"
                    size="small"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 选择中的详情数据表格结束 -->

    <!-- 药品列表的弹出层开始 -->
    <el-dialog
            :title="title"
            :visible.sync="open"
            width="1100px"
            center
            append-to-body
    >
      <!-- 查询条件开始 -->
      <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

        <el-form-item label="关键字" prop="keywords">
          <el-input
                  v-model="queryParams.keywords"
                  placeholder="请输入关键字"
                  clearable
                  size="small"
                  style="width:180px"
          />
        </el-form-item>
        <el-form-item label="药品类型" prop="medicinesType">
          <el-select
                  v-model="queryParams.medicinesType"
                  placeholder="药品类型"
                  clearable
                  size="small"
                  style="width:180px"
          >
            <el-option
                    v-for="dict in medicinesTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="处方类型" prop="prescriptionType">
          <el-select
                  v-model="queryParams.prescriptionType"
                  placeholder="处方类型"
                  clearable
                  size="small"
                  style="width:180px"
          >
            <el-option
                    v-for="dict in prescriptionTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="initMedicineslll()">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="a1">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 查询条件结束 -->

      <!-- 药品的数据表格开始 -->
      <el-table ref="medicinesTableList"  border :data="medicinesTableList" @selection-change="handleSelectionChnage">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="药品ID" align="center" prop="medicinesId" />
        <el-table-column label="药品名称" align="center" prop="medicinesName" />
        <el-table-column label="药品编号" align="center" prop="medicinesNumber" />
        <el-table-column label="生产厂家" width="280px" align="center" prop="producterId" :formatter="producterFormatter" />
        <el-table-column label="药品类型" align="center" prop="medicinesType" :formatter="statusformat"/>
        <el-table-column label="处方类型" align="center" prop="prescriptionType" :formatter="statusformat1"/>
        <el-table-column label="关键字" align="center" prop="keywords" />
      </el-table>
      <!-- 药品的数据表格结束 -->
      <!-- 分页控件开始 -->
      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.current"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="page.size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total">
      </el-pagination>
      <!-- 分页控件结束 -->
    </el-dialog>
    <!-- 药品列表的弹出层结束 -->

    <!-- 批量设置的弹出层开始 -->
    <el-dialog
            :title="title"
            :visible.sync="batchSetOpen"
            width="500px"
            center
            append-to-body
    >
      <el-form ref="batchSetForm" :model="batchSetForm" label-width="100px">
        <el-form-item label="数量" prop="purchaseNumber">
          <el-input-number v-model="batchSetForm.purchaseNumber" placeholder="请输入数量" size="small" />
        </el-form-item>
        <el-form-item label="批发价格" prop="tradePrice">
          <el-input-number v-model="batchSetForm.tradePrice" :precision="2" placeholder="请输入数量" size="small" />
        </el-form-item>
        <el-form-item label="批次号" prop="batchNumber">
          <el-input v-model="batchSetForm.batchNumber" placeholder="请输入批次号" size="small" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="batchSetForm.remark" placeholder="请输入备注" size="small" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" >确定</el-button>
        <el-button >取消</el-button>
      </span>
    </el-dialog>
    <!-- 批量设置的弹出层结束 -->
    <!-- <div>
      {{ purchaseItemList }}
    </div>
    <hr>
    <div>
      {{ selectMedicines }}
    </div> -->
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    filters: {
      rounding(value) {
        return value.toFixed(2)
      }
    },
    deactivated () {
      //解决vue组件 前进刷新，后退不刷新，
      //$destroy完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。
      this.$destroy();
    },
    data() {
      return {
        // 加载情节
        loading: false,
        // 是否打开药品的弹出层
        open: false,
        // 总条数
        page:{
          total:10,
          current:1,
          size:10
        },
        // 弹出层的标题
        title: '',
        // 是否已提交
        isSubmit: false,
        // 供应商的下拉列表数据
        providerOptions: [],
        // 生产厂家的列表数据
        producterOptions: [],
        // 药口类型的字典数据
        medicinesTypeOptions: [],
        // 处方类型的字典数据
        prescriptionTypeOptions: [],
        // 主表单的数据
        form: {
          purchaseId: undefined,
          providerId: undefined,
          purchaseTradeTotalAmount: undefined
        },
        // 声明数据详情表格的数据
        purchaseItemList: [],
        // 药品表格数据
        medicinesTableList: [],
        // 药品弹出层的查询条件
        queryParams: {
          medicinesType: undefined,
          prescriptionType: undefined,
          keywords: undefined
        },
        // 弹出层选中的药品
        selectMedicines: [],
        // 是否显示批量设置的弹出层
        batchSetOpen: false,
        // 批量设置的数据绑定
        batchSetForm: {
          purchaseNumber: 0,
          tradePrice: 0.00,
          batchNumber: '',
          remark: ''
        },
        rules: {
          providerId: [
            { required: true, message: '请选择供应商', trigger: 'blur' }
          ]
        }
      }
    },
    // 监听purchaseItemList里面的数据变化，更新总批发额
    watch: {
      purchaseItemList: {
        handler: function() {
          this.form.purchaseTradeTotalAmount = 0.00
          this.purchaseItemList.filter(item => {
            item.tradeTotalAmount = item.tradePrice * item.purchaseNumber
            this.form.purchaseTradeTotalAmount += item.tradeTotalAmount
          })
        },
        deep: true
      }
    },
    created() {
      //处方类型
      this.initStatus1();
      //药品类型
      this.initStatus();
      this.initProvider();
      this.initProducer();
      this.initPurchaseId();
      this.initMedicineslll();
    },
    methods: {
      // 查询药品数据
      initMedicinesAll(){
        //let search={...this.page,...this.queryParams};
        this.$axios.post("medicine/new/getAll/",).then(result => {
          this.purchaseItemList = result.data.t
          this.purchaseItemList=[]
          this.page.total = result.data.t.total
          // this.loading = false// 关闭遮罩
        })
      },
//药品类型字典解析
      statusformat(row){
        let val=row.medicinesType ;
        return this.formatDict(this.medicinesTypeOptions,val)
      },
      //药品类型
      initStatus(){
        this.$axios.get("system/api/dict/data/findByType/his_medicines_type").then(r=>{
          this.medicinesTypeOptions = r.data.t;
        })
      },
      //处方类型字典解析
      statusformat1(row){
        let val=row.prescriptionType ;
        return this.formatDict(this.prescriptionTypeOptions,val)
      },
      //处方类型
      initStatus1(){
        this.$axios.get("system/api/dict/data/findByType/his_prescription_type").then(r=>{
          this.prescriptionTypeOptions = r.data.t;
        })
      },
      //将生产厂家的数据放入producterOptions
      initProducer() {
        this.$axios.get("medicine/producer/getAll1").then(result => {
          this.producterOptions = result.data.t;
        })
      },

      producterFormatter(row) {
        let v=row.producterId;
        for(let i=0;i<this.producterOptions.length;i++){
          if(this.producterOptions[i].producerId==v){
            return this.producterOptions[i].producerName;
          }
        }
        return "";
      },
      initProvider() {
        this.$axios.get("medicine/provider/getAll1").then(result => {
          this.providerOptions = result.data.t;
          // this.statusFormatter2=result.data.data
        })
      },
      initPurchaseId(){
        this.$axios.get("medicine/new/xuehua").then(result =>{
          this.form.purchaseId=result.data.t.t;
        })
      },
//重置
      a1(){
        this.queryParams={};
        this.page.current=1;
        this.initMedicineslll();
      },
      // 打开选择药品的弹出层
      handleAddMedicines() {

        this.open = true
        this.title = '选择要添加的药品信息'
        this.initMedicineslll();
      },
      //查询弹出层药品的数据
      initMedicineslll(){
        let search={...this.page,...this.queryParams};
        // this.loading = true // 打开遮罩
        this.$axios.post("medicine/Medicines/getAll3/",search).then(result => {
          this.medicinesTableList = result.data.t.records
          this.page.total = result.data.t.total
          console.log(this.page.total);
          // this.loading = false// 关闭遮罩
        })
      },
      // 数据表格的多选择框选择时触发
      handleSelectionChnage(selection) {
        console.log(this.purchaseItemList)
        // console.log(selection)
        this.selectMedicines = selection
        this.selectMedicines.filter(m1 => {
          let flag = false
          // 判断purchaseItemList里面有没有已选择的ID
          this.purchaseItemList.filter(purch => {
            if (m1.medicinesId === purch.medicinesId) {
              flag = true
            }
          })
          // 如果没有，就加入purchaseItemList
          if (!flag) {
            // 放到purchaseItemList对象是selection深度clone
            this.purchaseItemList.push(JSON.parse(JSON.stringify(m1)))
          }
        })
      },

      //添加到主表中
      handleSubmitAndAudit() {
        const tx = this
        if (tx.purchaseItemList.length > 0) {
          tx.$refs['form'].validate((valid) => {
            if (valid) {
              // 组装要提交到后台的数据
              const purcheseObj = {
                'Purchase': tx.form,
                'PurchaseItem': tx.purchaseItemList
              }
              console.log(JSON.stringify(purcheseObj))
              this.$axios.post("medicine/new/addnew1",purcheseObj).then(res => {
                tx.$message.success('提交审核成功')
                // 上面的四个按钮不能按了
                this.$router.push("/stock/purchase")
              }).catch(() => {
                tx.$message.error('提交审核失败')
              })
            }
          })
        } else {
          tx.msgError('药品数据项不能为空')
        }
      },

      // 删除详情数据
      handleDelete(index, row) {
        this.purchaseItemList.splice(index, 1)
      },

      //分页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.size=val;
        this.initMedicineslll()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.current=val;
        this.initMedicineslll()
      },
      handleSubmit() {
        const tx = this
        if (tx.purchaseItemList.length > 0) {
          tx.$refs['form'].validate((valid) => {
            if (valid) {
              // 组装要提交到后台的数据
              const purcheseObj = {
                'Purchase': tx.form,
                'PurchaseItem': tx.purchaseItemList
              }
              console.log(JSON.stringify(purcheseObj))
              this.$axios.post("medicine/new/addnew",purcheseObj).then(res => {
                tx.$message.success('暂存成功')
                this.$router.push("/stock/purchase")
                // 上面的四个按钮不能按了
              }).catch(() => {
                tx.$message.error('暂存失败')
              })
            }
          })
        } else {
          tx.$message('药品数据项不能为空')
        }
      },
    }
  }
</script>

<style scoped>
  .box-card{
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
  }
</style>
